<template>
<div>
	<fitler-mask :columns="columns2" @on-value="handleSearch" @on-refresh="handleRefresh"></fitler-mask>
	<Table border :columns="columns1" :data="filterData" :loading="loadTable"></Table>
</div>

</template>

<script>
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import { loginInvalid } from "../../libs/loginInvalidNotice.js";
import fitlerMask from '../main-components/filtermask';
export default {
	components: {
		fitlerMask
	},
	data() {
		return {
			loadTable: false,
			cpyData: null,
			filterList: {
				name: '',
				man_phone: '',
				expense: '',
				dep_audit: '',
				center_audit: ''
			},
			columns1: [{
					title: '所属项目',
					key: 'name',
					width: 150
				},
				{
					title: '合计金额(万元)',
					key: 'sum_money'
				},
				{
					title: '经办人及联系电话',
					key: 'man_phone',
					width: 220
				},
				{
					title: '经费来源情况(项目名称及经费号)',
					key: 'expense'
				},
				{
					title: '部门审核负责人',
					key: 'dep_audit',
				},
				{
					title: '中心审核主管领导',
					key: 'center_audit',
				},
				{
					title: '.',
					fix: 'right',
					align: 'center',
					render: (h, params) => {
						return h('i-button', {
							props: {
								type: 'info'
							},
							on: {
								click: () => {
									this.$router.push({
										name: 'order-check-m',
										params: {
											projectId: params.row.project_id,
											projectName: params.row.name,
											tableId: params.row.table_id
										}
									})
								}
							}
						}, '详情')
					}
				}
			],
			columns2: 
			[
				{
					title: '所属项目',
					key: 'name',
					width: 150
				},
				{
					title: '经办人及联系电话',
					key: 'man_phone',
					width: 250,
				},
				{
					title: '经费来源情况(项目名称及经费号)',
					key: 'expense',
				},
				{
					title: '部门审核负责人',
					key: 'dep_audit',
				},
				{
					title: '中心审核主管领导',
					key: 'center_audit',
				},

			],
			data4: [],
		}
	},
	methods: {
		refreshOderlist() {
			this.loadTable = true;
			this.$axios.get(HOST + '/project/mTablesList', {
					withCredentials: true
				})
				.then((response) => {
					this.loadTable = false;

					let data = response.data;
					if (data.length > 0) {
						this.data4 = data;
						this.cpyData = data;
					}
				})
				.catch((err) => {
					if (err.data.status && err.data.status === 'invalid Token') {
						loginInvalid(this)();
					} else {

					}
				})
		},
		handleSearch(value) {
			for (let key in value) {
				this.filterList[key] = value[key];
			}
			this.$forceUpdate();
		},
		handleRefresh() {
			for (let key in this.filterList) {
				this.filterList[key] = '';
			}
			this.$forceUpdate();
		}

	},
	computed: {
		filterData() {
			let fList = Object.keys(this.filterList);
			const filterList = this.filterList;
			if (fList.length > 0) {
				return this.data4.filter((item) => {
					return fList.every((key) => {
						return item[key].indexOf(filterList[key]) !== -1;
					})
				})
			}
			return this.data4;
		}
	},
	mounted() {
		this.refreshOderlist();
	}
}
</script>
